<template>
  <div>
    <div class="page-wrap clearBoth">
      <!--<el-pagination-->
      <!--@current-change="handleCurrentChange"-->
      <!--:current-page="pagination.currentPage"-->
      <!--:page-size="pagination.pageSize||10"-->
      <!--:small="true"-->
      <!--class="fr"-->
      <!--:count="pagination.count"-->
      <!--&gt;-->
      <!--</el-pagination>-->
      <Pagination
        class="fr pagination"
        :small="true"
        :currentPage="pagination.currentPage"
        :count="pagination.count"
        :pageSize="pagination.pageSize"
        @turnPage="handleCurrentChange"
        :totalPage="Math.ceil(pagination.count/pagination.pageSize)"
      >
      </Pagination>
      <el-select
        size="mini"
        class="size-select fr"
        v-model="pagination.pageSize"
        :placeholder="$t('public.pleasePick')"
        @change="sizeSelectChange">
        <el-option
          v-for="item in size"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <table class="el-table el-table--striped el-table--enable-row-hover" border="0" cellspacing="0">
      <thead class="table-head" :id="'head' + random">
      <tr>
        <slot name="thead"></slot>
      </tr>
      </thead>
      <tbody class="el-table__body table-body"
             :style="{maxHeight: maxHeight}"
             :id="'body' + random"
             ref="renderFilter"
             @scroll="handleScroll">
        <tr v-if="minAndMax.min > 0" :style="{width: '100px', height: minAndMax.min * trHeight + 'px'}">
          <td class="padding-no"></td>
        </tr>
        <slot name="tbody" :current="currentShow"></slot>
        <tr v-if="minAndMax.button > 0":style="{width: '100px',height: minAndMax.button * trHeight + 'px'}" >
          <td class="padding-no"></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
  import Pagination from '@/components/public-modules/card/Pagination'
  import * as uuid from 'uuid'
  export default {
    name: 'tableData',
    data () {
      return {
        random: uuid.v1(), // 生成id
        current: [],
        size: [
          {label: this.$t('monitor.page', {num: 10}), value: 10},
          {label: this.$t('monitor.page', {num: 20}), value: 20},
          {label: this.$t('monitor.page', {num: 50}), value: 50},
          {label: this.$t('monitor.page', {num: 100}), value: 100},
          {label: this.$t('monitor.page', {num: 200}), value: 200},
          {label: this.$t('monitor.page', {num: 500}), value: 500},
          {label: this.$t('monitor.page', {num: 1000}), value: 1000}
        ],
        pagination: {
          pageSize: 10,
          count: 0,
          currentPage: 1
        },
        minAndMax: {
          min: 0,
          max: 30,
          button: 0
        },
        currentShow: [],
        maxHeight: '0px'
      }
    },
    props: {
      trHeight: {type: Number, default: 53}, // 每个tr的高度
      allList: {type: Array, default: function () { return [] }}
      // header: {type: Array, default: function () { return [] }}
      // pagination: {type: Object, default: function () { return { pageSize: 10, count: 0, currentPage: 1 } }}
    },
    computed: {
    },
    components: {
      Pagination
    },
    methods: {
      // 每页显示条数改变后初始化
      sizeSelectChange () {
        this.init()
      },
      handleScroll () {
        if (this.$refs.renderFilter) {
          // tbody 滚动距离
          let top = this.$refs.renderFilter.scrollTop
          console.log('scrollHeight:', this.$refs.renderFilter.scrollHeight)
          console.log('clientHeight:', this.$refs.renderFilter.clientHeight)
          console.log(top)
          // 顶部占位的条数
          let min = ~~(top / this.trHeight)
          if (min < 0) {
            min = 0
          }
          // 最多展示30条坐席详情
          let max = min + 30
          // 底部占位的条数
          let button = this.current.length - max
          button = button > 0 ? button : 0
          this.minAndMax.min = min
          this.minAndMax.max = max
          this.minAndMax.button = button
          // 要展示的数据
          this.currentShow = this.current.slice(min, max)
        }
      },
      // 翻页
      handleCurrentChange (val) {
        this.pagination.currentPage = val || 1
        let size = this.pagination.pageSize || 10
        let end = Math.min(size * (val), this.pagination.count)
        this.current = this.allList.slice(size * (val - 1), end)
        this.handleScroll()
      },
      // 初始化翻页
      init () {
        this.pagination.count = this.allList.length
        // 最大页数
        let maxPage = Math.ceil(this.pagination.count / this.pagination.pageSize)
        if (this.pagination.currentPage > maxPage) {
          this.pagination.currentPage = maxPage
        }
        this.handleCurrentChange(this.pagination.currentPage)
      },
      // 表头fixed计算
      fixed () {
        let head = document.querySelector('#head' + this.random)
        let tbody = document.querySelector('#body' + this.random)
        if (head && tbody) {
          let headH = head.offsetHeight + 96 + 'px'
          this.maxHeight = 'calc(100vh - ' + headH + ')'
        }
      }
    },
    watch: {
      allList () {
        this.init()
        this.handleScroll()
      }
    },
    mounted () {
      this.fixed()
      this.init()
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl'
  .el-table
    overflow visible
  .pagination
    padding 8px 15px
  .page-wrap
    border 1px solid $c-border1
    border-bottom none
  .size-select
    margin-top 6px
    width 100px
  .table-head
    display table
    width 100%
    table-layout fixed
  .table-body
    display block
    overflow-y scroll
    .padding-no
      padding 0
</style>
